<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/move.yintao1.05.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		html,body{
			margin: 0; padding: 0;
			height: 100%;
			overflow: hidden;
		}
		*{
			margin: 0; padding: 0;
		}
		.div{
			margin: auto;
			width: 810px;
			height: 320px;
			position: relative;
			overflow: hidden;
		}
		.div ul {
			position: absolute;
			left: 0; top: -1280px;
			width: 810px;
			height: 1600px;
			list-style: none;
		}
		.div ul li {
			float: left;
		}
		p{
			position: absolute;
			height: 320px;
			width: 30px;
			right: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			background: #CCCCCC;		
			opacity: 0.7;				
		}
		span{
			width: 20px;
			height: 20px;
			background: #000000;
			border-radius: 50%;
			display: block;
		}
		.span1{			
			background: blue;
		}
	</style>	
	<script type="text/javascript">
		window.onload = function(){       		
			var ul = document.getElementsByClassName("div")[0].children[0];
			var span=Array.from(document.getElementsByTagName("span"));
			//图片轮播
			var index = 0;
			var t;
			function a(){
				t=setInterval(function(){
				    index++;
				    animate(this,{top:-1280+320*index},{callback:function(){
						if(index==4){
							ul.style.top=-1280+"px";
							index=0;
						}
					}})				
					var index1=index;
					if(index==4){
					   index1=0;
			     	}
					for(var i in span){
						span[i].className="";
					}
					span[index1].className="span1";				
			    }.bind(ul),2000)
			}
			a();
			
			//鼠标划入
			var div=document.getElementsByClassName("div")[0];
			div.onmouseover=function(){
				clearInterval(t);
			}
			//鼠标划出
			div.onmouseout=function(){
				a();
			}			
			//点击切换图片
		    for(var i in span){
				span[i].num=i;
				span[i].onclick=function(){
					index=this.num;
					ul.style.top=-1280+320*index+"px";
					for(var i in span){
					    span[i].className="";
				    }
					this.className="span1";	
		       }
				
				span[i].onmouseover=function(event){
					var event=event||window.event;
					for(var i in span){
					    span[i].className="";
				    }
					this.className="span1";	
					//event.stopPropagation?event.stopPropagation():event.cancelBubble=true;					
				}
			}
	    }		
	</script>
	<body>
		<div class="div">
			<ul>
				<li><img src="img/001.jpg" /></li>
				<li><img src="img/004.jpg" /></li>
				<li><img src="img/003.jpg" /></li>
				<li><img src="img/002.jpg" /></li>								
				<li><img src="img/001.jpg" /></li>							
			</ul>
			<p>
				<span class="span1"></span>
				<span></span>
				<span></span>
				<span></span>
			</p>
		</div>
	</body>
</html>
